<!--模板界面-->
<template>
  <div class="jiemian">

    <div class="topMenu">
      <div class="leftPart">
        <div><img src="../../../../public/static/image/logo2.png" alt=""></div>
      </div>
      <div class="rightPart">
          <div class="line-name">
            <!-- <div class="topline"></div> -->
            <div class="xi-name">IP地址：{{nowUrl}}</div>
          </div>
          <div class="right-dir">
            <div class="timer">{{nowtimer}}</div>
            <!-- <div class="topline"></div> -->
            <div class="tongbu" @click="synchronizefn">同步时间</div>
            
            <!-- 信息 -->
            <div class="topimg">
              <div class="tongbu" style="width:70px"  @mouseover='isexit2 = true'>
                <div class="tongbudiv">
                  <img src="../../../assets/unifyImg/wenhao.png" alt="">帮助
                </div>
                <div :class="['myexit',{'exit-active':isexit2}]" @mouseout='isexit2 = false'>
                  <div class="exit-con">
                    <div class="myexit-item quxiao"  @click="viewNowBanben"><img src="../../../assets/unifyImg/tanhao.png" alt="">查看版本</div>
                    <div class="myexit-item quxiao"  @click="downloadWord"><img src="../../../assets/unifyImg/wenjian.png" alt="">帮助文档
                    </div>
                  </div>
                </div>
              </div>
              <!-- 通讯机主程序：时间：2025-1222  版本号：C46556
              webserver：时间：2025-1222  版本号：C46556 -->
              <!-- <el-tooltip class="item" effect="dark" content="查看版本" placement="top">
                <img src="../../../assets/login/info.png" alt="">
              </el-tooltip> -->
            </div>
            <div class="myuser" @mouseover='isexit = true'>
              <div class="user-img">
                <img src="../../../assets/topMenu/Ellipse1.png" alt="">
              </div>
              <div class="user-name" style="color:#fff">{{nowUserName}}</div>
              <div class="xiala">
                <img src="../../../assets/topMenu/dropdown.png" alt="" :class="{'imgxuanzhan':isexit}">
              </div>
              
              <div :class="['myexit',{'exit-active':isexit}]" @mouseout='isexit = false'>
                <div class="exit-con">
                  <div class="myexit-item quxiao"  @click="changemima"><img src="../../../assets/topMenu/xiugai.png" alt="">修改密码</div>
                  <div class="myexit-item quxiao" @click="logout"><img src="../../../assets/topMenu/tuichu.png" alt="">退出登录
                  </div>
                </div>
              </div>
            </div>
          </div>
          
      </div>
    </div>
  </div>
</template>

<script>
import { useCounterStore } from '../../../stores/counter'
  // import menuStore from '@/cache/menuStore.js'
  import {timeSyncSystem,getWebserverVersion} from "../../../api/forwardApi";
  export default {
    components: {
    },
    props: [],
    data () {
      return {
         isexit:false,
         nowUrl:"",
         showPing: false,
         isCollapse: false,
         newLogo: [],
         radio: '1',
         nowtimer:"",
         setIntervalTimer:null,
         nowUserName:"admin",
         isexit2:false,
      }
    },
    created () {
    
    },
    mounted () {
          var currentUrl = window.location.href;
          var baseUrl = currentUrl.substring(0, currentUrl.indexOf('/#'));
          this.nowUrl = baseUrl.replace("http://", "")
          this.getNowTime()
          clearInterval(this.setIntervalTimer)
          this.setIntervalTimer = setInterval(() => {
              this.getNowTime()
          },1000)


    },
    unmounted () {
      // console.log("页面销毁");
      clearInterval(this.setIntervalTimer)
    },
    computed: {
      //打开说明文档
      downloadWord() {
        this.$router.push('/describeWord')
      },
      msgList () {
        //只保留最新的100条消息，而且刷新就移除

        var list=this.$store.socketStore.state.msgList.filter((item,index) => index<100)
    
        if(isempty(list)) {
          list.push({
            type: 'tips',
            name: '没有更多消息了'
          })
        }

        if(this.filterStatus) {
          return list.filter(item => {
            return item.hasOwnProperty('unReaded')
          })
        } else {

          return list
        }
      },
      dataList () {
        // var data=this.$store.unitStore.getters.getUnitTree
        return []
      },
    
     
      // 当前存在未读消息计算

      existMsg () {
        for(var i=this.msgList.length-1;i>=0;i--) {
          if(this.msgList[i].hasOwnProperty('unReaded')) {
            return true
          }
        }
        return false
      },
      // 当前未读消息的个数

      unReadNum () {
        var total=0;
        for(var i=0;i<this.msgList.length;i++) {
          if(this.msgList[i].hasOwnProperty('unReaded')) {
            total++
          }
        }
        return total
      },


    },
    watch: {


    },
    methods: {
      //查看当前版本
      viewNowBanben(){
       getWebserverVersion().then(res => {
          // console.log("查看版本",res);
          if(res != undefined){
              // this.$alert(`当前版本为 ${res.webserver.version}`, '查看版本', {
              //   confirmButtonText: '确定',
              //   callback: action => {}
              // });
              this.$alert(`
              <div style="font-size:16px">通讯机主程序：版本号：${res.txjmain.version} 时间:${res.txjmain.build_time}</div>
               <div style="font-size:16px">webserver：版本号：${res.webserver.version} 时间:${res.webserver.build_time}</div>
              `, '查看版本', {
                dangerouslyUseHTMLString: true
              });
          }else {
               this.$message({showClose: true,message: `查看版本失败`,type: 'error'});
          }
       })
        
      },
      //获取当前时间
      getNowTime(){
          // 获取当前时间的时间戳
          var currentTimestamp = new Date().getTime();

          // 创建一个新的Date对象，使用时间戳
          var currentDate = new Date(currentTimestamp);

          // 获取年、月、日、星期、时分和秒
          var year = currentDate.getFullYear();
          var month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的，所以需要+1
          var day = currentDate.getDate().toString().padStart(2, '0');
          var weekDay = currentDate.getDay(); // 星期是从0开始的，所以需要转换
          var hours = currentDate.getHours().toString().padStart(2, '0');
          var minutes = currentDate.getMinutes().toString().padStart(2, '0');
          var seconds = currentDate.getSeconds().toString().padStart(2, '0');

          // 合并成最终的字符串格式
          var formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;

          // 如果需要包含星期，可以添加星期信息
          var weekDays = ['日', '一', '二', '三', '四', '五', '六'];
          var formattedDateWithWeek = year + '年' + month + '月' + day + '日 ' + '星期'+weekDays[weekDay] + ' ' + hours + ':' + minutes + ':' + seconds;

          // console.log(formattedDate); // 输出格式化的日期字符串
          // console.log(formattedDateWithWeek); // 输出包含星期的日期字符串
          this.nowtimer = formattedDateWithWeek
      },
      //同步时间
      synchronizefn(){
         var timestamp = new Date().getTime();
         timeSyncSystem({'timeStamp':String(timestamp)}).then(res => {
              // console.log("同步时间",res);
         })
        // console.log(timestamp); // 输出当前的时间戳

      },
      //退出登录
        buton(){
        useCounterStore().setwhetherLogin(false)
		  	localStorage.removeItem("token");
        },
 
      //切换书签栏

      bookmark_fn () {
        menuStore.commit('setBookmark',!this.bookmark)
      },
      //点击跳转到logo配置页面

      logoPage () {
        this.$router.push('/logoConfiguration')
      },
    changemima(){
        useCounterStore().setmima(true)
    },

   
      logout () {
        this.$confirm(`确定要退出登录吗？`,'提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
               localStorage.removeItem('token')
               useCounterStore().setwhetherLogin(false)
            }).catch(() => {
              // ...
            });
        
      },
    
      // 判断当前是否支持全屏显示

      isFullscreen () {
        return document.fullscreenElement||
          document.msFullscreenElement||
          document.mozFullScreenElement||
          document.webkitFullscreenElement||false;
      },
      // 过滤显示的消息

      filterUnreadMsg () {
        this.filterStatus=!this.filterStatus
      },
      // 标记为已读消息

      markUnreadMsg (item) {
        this.$delete(item,'unReaded')
      }
    }
  }
</script>

<style scoped lang="scss">
 
  .cropper-content {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .topimg {
    //  margin-right: 20px;
     cursor: pointer;
     
  }
  .ul {
    padding: 0 15px;
  }
  .leftPart {
     width: 180px;
     height: 44px;
     div {
       width: 156px;
       height: 32px;
       margin-top: 12px;
       margin-left: 12px;


       width: 142px;
       height: 22px;
       margin-top: 16px;
       margin-left: 12px;
     }
     img {
       width: 100%;
       height: 100%;
     }
  }
 
.rightPart {
     flex: 1;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     border-left: 1px solid #333333;

}

.right-dir {
   display: flex;
   align-items: center;
   .timer {
     font-size: 12px;
     color: #fff;
   }
   .tongbu {
      width: 64px;
      height: 24px;
      border-radius: 4px;
      background-color: #42464A;
      color: #fff;
      font-size: 12px;
      margin-right: 20px;
      margin-left:4px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      img {
         margin-right: 4px;
      }
      &:hover {
        background-color: #368ed9;
     }
   }
   
}

      .myuser {
        display: flex;
        align-items: center;
        height: 100%;
        position: relative;
        margin-right: 20px;

        .user-img {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          overflow: hidden;


        }

        .user-name {
          margin: 0px 12px 0px 8px;
          font-size: 14px;
        }

        .xiala {
          width: 20px;
          height: 20px;
          cursor: pointer;

          img {
            transition: 0.3s;
          }

          .imgxuanzhan {
            transform: rotate(180deg);
          }
        }
      }

      .myexit {
        width: 120px;
        // background-color: red;
        position: absolute;
        top: 0px;
        right: 0px;
        padding-top: 43px;
        z-index: 9999;
        //  box-shadow: 0 4px 24px 0 rgba(153,153,153,0.3);
        //  padding: 8px;
        display: none;

        &.exit-active {
          display: block;
        }

        .exit-con {
          background: #fff;
          box-shadow: 0 4px 24px 0 rgba(153, 153, 153, 0.3);
          padding: 8px;
          border-radius: 4px;

          img {
            margin: 0px 8px;
          }
        }

        .myexit-item {
          width: 104px;
          height: 36px;
          color: #1A1A1A;
          display: flex;
          align-items: center;
          cursor: pointer;
          //  padding-left: 10px;
          color: #1A1A1A;
          box-sizing: border-box;
          border-radius: 4px;
          font-size: 13px;

          &:hover {
            border: 1px solid #3C89F2;
            background-color: #E7F0FF;
          }
        }

        .quxiao {
          border-top: 0px;
        }
      }
      .tongbu {
         .tongbudiv {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .myexit {
           right: -30px;
           top: -6px;
        }
      }
       


.line-name {
     display: flex;
     align-items: center;
}
.xi-name {
   margin-left: 20px;
   color: #fff;
}
.topline {
   width: 1px;
   height: 20px;
   background-color: #4D4D4D;
}


 


  .btns {
    width: 300px;
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #d7d7d7;
    margin: 0 15px;
  }




  .arrow-active {
    transform: rotateZ(180deg);
  }

  .topMenu {
    height: 44px;
    /* overflow-y: hidden; */
    /* overflow: hidden; */
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: #25282C;
  }



  .nowUnit-active {
    border: 1px solid #409eff;
  }

  .nowUnit-active1 {
    border: 1px solid #fff;
  }
   .nowUnit-name img {
       transition: 0.5s;
    }

  .nowUnit-active img {
    transform: rotateZ(180deg);
  }

  .nowUnit-active1 img {
    transform: rotateZ(180deg);
  }




</style>